import React, { Component } from 'react'
import VipHead from './VipHead';
import "./vippage.css";
import bg from "./img/vip_bg.png";
import {Modal, Toast} from 'antd-mobile';
import {post} from '../../Lib/Http';
import apiUrl from '../../Config/web';

class VipPage extends Component {

    constructor(props){
        super(props);

        this.state = {
            form:''
        }

    }

    buyVip(e, month){
        let info = "确认购买"+ month + "个月会员吗?";
        Modal.alert('购买确认', info, [
            {
                text:"取消", onPress:()=> console.log("取消")
            },
            {
                text:"确认", onPress:()=> this.acceptBuy(month)
            }
        ]);
    }

    acceptBuy(month){
        console.log("确认购买！" + month);

        Toast.loading('loading...', 10);

        let that = this;

        post(apiUrl.create_order_vip, {
            month:month
        }, function(success){

            Toast.hide();
            console.log(success);

            if(success.status !== 200){
                return;
            }

            if(success.data.code === 1000){
                that.props.history.push('/login');
                console.log('login');
                return;
            }

            that.setState({
                form:success.data
            });

            document.forms['alipaysubmit'].submit();

            return;


        }, function(error){
            Toast.hide();

            console.log(error);
        });

    }

    getVipCard(info){

        let className = "vip_buy_card " + info.classname;
        let month = info.month + "个月会员超值特惠";
        let money = info.money;
        let privilege = info.privilege;

        return (
            <div className={className}>
                <div className="vip_buy_introduce" >{month}</div>
                <div className="vip_buy_sign">￥</div>
                <div className="vip_buy_price">{money}</div>
                <div className="vip_buy_slogan s_one">原价月均10元起</div>
                <div className="vip_buy_slogan s_two">{privilege}</div>
                <div onClick={(e)=>this.buyVip(e, info.month)} className="vip_buy_button">开通会员</div>
            </div> 
        );
    }


    render() {

        let vipCard = this.getVipCard({
            classname:'box1',
            month:6,
            money:10,
            privilege:"先月均1元6毛"
        });

        let vipCard2 = this.getVipCard({
            classname:'box2',
            month:12,
            money:15,
            privilege:"先月均1元2毛"
        });

        let vipCard3 = this.getVipCard({
            classname:'box3',
            month:24,
            money:20,
            privilege:"先月均8毛"
        });

        return (
            <div className="root">
                <VipHead url='/user' history={this.props.history} title='超值会员' />
                <div className="vip_bg" style={{backgroundImage:"url("+bg+")"}}>
                    <div className="vip_row"></div>
                    <div className="vip_h1">限时大会员</div>
                    <div className="vip_h2">特价<span className="h2_red">1</span>折起</div>
                    {vipCard}
                    {vipCard2}
                    {vipCard3}
                    <div className="vip_introduction">
                        会员权益：全场试卷免费阅读等
                    </div>
                </div>
                <div style={{'display':'none'}} dangerouslySetInnerHTML={{__html:this.state.form}}></div>
            </div>
        );
    }

}

export default VipPage;